(function () {
    // 定义请求地图资源的路径
    let baseUrl = "http://127.0.0.1:5500/date22_04_07";
    // 定义散点颜色
    let scatterColor = [
        "#afdd22",
        "#FF0000",
        "#3D9EFF",
        "#FFFF00",
        "#FF8000",
        "#00FFFF",
        "#FF00FF",
        "#80FF00",
        "#0080FF",
    ];
    // 企业的原始数据
    let srcData = [{
            //企业名称
            name: "企业1",
            // 经纬度
            value: [106.34256631528756, 29.518940054546178],
            // 企业相关介绍的经纬度
            contextPos: [106.24656631528756, 29.618940054546178],
            // 企业相关数据
            data: 10,
            // 企业简介
            context: "企业1的相关介绍",
            // 点击企业标签的跳转路径
            href: "http://www.baidu.com/"
        },
        {
            name: "企业1",
            value: [106.38256631528756, 29.588940054546178],
            contextPos: [106.49256631528756, 29.618940054546178],
            data: 500,
            context: "企业2",
            href: "http://www.baidu.com/"
        },
        {
            name: "企业3",
            value: [106.34256631528756, 29.638940054546178],
            contextPos: [106.26256631528756, 29.708940054546178],
            data: 30,
            context: "相关介绍",
            href: "http://www.baidu.com/"
        },
        {
            name: "企业4",
            value: [106.36256631528756, 29.438940054546178],
            contextPos: [106.55256631528756, 29.518940054546178],
            data: 560,
            context: "相关信息",
            href: "http://www.baidu.com/"
        },
        {
            name: "企业5",
            value: [106.32256631528756, 29.338940054546178],
            contextPos: [106.24256631528756, 29.268940054546178],
            data: 5100,
            context: "信息",
            href: "http://www.baidu.com/"
        },
    ];



    // 可视化地图的相关配置项
    let option = {
        // 定义背景地图
        geo: {
            map: "cq",
            aspectScale: 1.4, //长宽比
            zoom: 0.9,
            roam: false, // 禁止鼠标滚轮缩放地图
            label: {
                show: true,
                color: "#ffffff",
                fontSize: 12
            },
            // 地图的基本样式
            itemStyle: {
                normal: {
                    areaColor: "rgba(6,99,188)",
                    shadowColor: "rgba(0,212,199,0.8)",
                    shadowOffsetX: 0,
                    shadowOffsetY: 8,
                    borderColor: "#8ef1f6",
                    borderWidth: 0,
                },
                // 地图高亮样式
                emphasis: {
                    areaColor: "#2AB8FF",
                    borderWidth: 0,
                    color: "green",
                },
            },
        },
        // 设置鼠标滑动到相应组件上显示数据
        tooltip: {
            show: false,
        },

        // 数据的视觉效果
        visualMap: [{
                min: 0,
                max: 300,
                splitNumber: 200,
                seriesIndex: 1,
                show: false,
                inRange: {
                    color: ["#44FCF7", "#08E4DE", "#44FCF7", "#08E4DE"],
                },
                textStyle: {
                    color: "#fff",
                },
            },
            {
                min: 0,
                max: 1000,
                show: false,
                splitNumber: 10,
                seriesIndex: 0,
                inRange: {
                    color: ["#F5B16D", "#EC870E", "#D0770B", "#F09C42"],
                    // color: ["#44FCF7", "#08E4DE", "#44FCF7", "#08E4DE"],
                },
                textStyle: {
                    color: "#fff",
                },
            },
        ],
        // echarts相应的可视化组件
        series: []
    };

    // 定义函数将原始数据对象转换为echarts展示的光点数据对象
    function convertLightData(srcData) {
        let data = {
            ...srcData,
            itemStyle: {
                normal: {}
            },
            visualMap: false
        };
        data.itemStyle.normal.color = scatterColor[srcData.data % scatterColor.length];
        return data;
    }


    // 将原始数据转换成热力点的数据
    function convertHeatmapData(srcData) {
        let target = srcData.map(item => {
            let target = item.value;

            // target[0] = Math.floor(target[0]*100)/100;
            // target[1] = Math.floor(target[1]*100)/100;
            target.push(parseInt(Math.random() * 1000));
            return target;
        });
        for (let i = 0; i < 10; i++) {
            target.push([Math.random() * 0.20 + 106.23, Math.random() * 0.4 + 29.3, parseInt(Math.random() * 1000)]);
        }
        return target;
    }


    // 地图发光点的配置函数
    function setLightPoints() {
        // 设置散点图的相关配置
        let effectScatter = {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            data: srcData.map(convertLightData),
            label: {
                show: false,
                color: '#FFFFFF',
                position: 'right',
                formatter: function (value) {
                    return value.data.name
                }
            },
            itemStyle: {
                color: '#FFFFFF',
            },
            tooltip: {
                show: true,
                formatter: function (value) {
                    return value.data.name
                }
            },
            symbolSize: 5,
        }
        option.series.push(effectScatter);
    }

    // 热力点的相关配置函数
    function setHeatPoint() {
        // 热力图的相关配置
        let heatmap = {
            type: 'heatmap',
            coordinateSystem: 'geo',
            pointSize: 5, // 设置 热力图 点 的大小
            blurSize: 3, // 设置点的 阴影半径
            data: convertHeatmapData(srcData)
        };
        option.series.push(heatmap);
    }


    // 企业信息展示配置和线条的相关配置函数
    function setEnterpriseLabel() {
        //鼠标事件;
        let activeAreaName = '';

        // 定义企业相关标注
        let enterpriseLabel = {
            type: 'lines',
            // z: 3,
            coordinateSystem: 'geo',
            // symbol: 'image://',
            symbolSize: [10, 0], //只保留地图端标记
            opacity: 1,
            zlevel: 4,
            // 线条动画
            effect:{
                show: true,
                period: 5, //箭头指向速度，值越小速度越快
                trailLength: 0.01, //特效尾迹长度[0,1]值越
                symbol: 'circle',
                symbolSize: 5,
                color: 'rgb(255,0,255)',
            },
            label: {
                show: true,
                position: 'end',
                rich: {
                    //标题样式
                    title: {
                        align: 'center',
                        lineHeight: 17,
                        fontSize: 12,
                        color: '#fff',
                        backgroundColor: '#34A0FF',
                        width: 100,
                        height: 25,
                        borderRadius: [4, 4, 0, 0],
                    },
                    value: {
                        //内容样式
                        align: 'left',
                        verticalAlign: "top",
                        height: 25,
                        width: 100,
                        fontSize: 10,
                        color: '#34A0FF',
                        backgroundColor: '#fff',
                        borderRadius: [0, 0, 4, 4],
                    },
                },
                formatter: function (params) {
                    //文本提示框
                    return (
                        '{title|' +
                        params.name +
                        '}\n{value|' +
                        params.data.context +
                        '}'
                    );
                },
            },
            backgroundColor: '#7ec4ff',
            borderColor: '#fff',
            borderWidth: 1,
            borderRadius: 4,
            align: 'center',
            width: 100,

            lineStyle: {
                //视觉引导线属性
                type: 'dashed',
                opacity: 1,
                color: 'rgba(255,255,0,0.5)', //引导线颜色
                curveness: 0.1,
                type: 'solid',
            },
            data: srcData.map((item) => {
                let label = {};
                if (item.name === activeAreaName) {
                    let width = 92;
                    label = {
                        formatter: function (params) {
                            return (
                                '{title|' +
                                params.name +
                                '}\n{data| 成员人数：' +
                                params.data +
                                '}\n{value| 责任人：' +
                                params.data.group +
                                '}'
                            );
                        },
                        backgroundColor: '#FFB569',
                        borderColor: '#FFB569',
                        width: 100,
                        rich: {
                            title_active: {
                                align: 'center',
                                lineHeight: 17,
                                fontSize: 12,
                                color: '#fff',
                                backgroundColor: '#FFB569',
                                width: 100,
                                height: 25,
                                borderRadius: [4, 4, 0, 0],
                            },
                            value_active: {
                                height: 25,
                                width: 100,
                                color: '#FFB569',
                                backgroundColor: '#fff',
                                borderRadius: [0, 0, 4, 4],
                            },
                        },
                    };
                }
                return Object.assign({
                        coords: [item.value, item.contextPos],
                        label,
                    },
                    item
                );
            }),

        };
        option.series.push(enterpriseLabel);
    }


    // 请求地图数据
    $.get(baseUrl + "/json/map.json", (data, status) => {
        // 请求地图数据失败
        if (status !== 'success') {
            alert("地图数据请求失败:" + status);
            console.log("地图数据请求失败:" + status);
            return;
        }
        // 地图数据请求成功 初始化地图数据
        echarts.registerMap('cq', data);
        let mapEcharts = echarts.init(document.getElementById('map_1'));

        /************在地图的基础上，添加各种可视化组件***************/
        setLightPoints();
        setHeatPoint();
        setEnterpriseLabel();
        /****************************/

        // 点击企业标签，跳转到企业对应的页面上
        mapEcharts.on('click','series.lines',(params)=>{
            if(params.data.href){
                window.open(params.data.href,"_blank");
            }
        });

        // 设置地图的配置对象
        mapEcharts.setOption(option);
    })
})();